﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageHandler.aspx.cs" Inherits="Manage_ImageHandler" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>图片上传管理</title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font: 12px 微软雅黑, Verdana, Tahoma, Lucida Grande, Arial, sans-serif;
            width: 100%;
            overflow: hidden;
            border: 0;
            background-color: #ECE9D8;
            color: #000000;
            overflow-y: auto;
        }
        #main_table
        {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            empty-cells: show;
        }
        #main_table #img_body
        {
            width: 100%;
            height: 100%;
            background-color: White;
            border: 1px #dddfd4 solid;
            overflow-y: auto;
        }
        #bottom_td div
        {
            height: 25px;
        }
        #bottom_td label
        {
            width: 80px;
            display: inline-block;
        }
        .img_out
        {
            width: 110px;
            float: left;
            margin: 10px;
            display: block;
        }
        .img_in
        {
            width: 105px;
            height: 85px;
            border: 1px #dddfd4 solid;
            text-align: center;
            vertical-align: middle;
            background-color: transparent;
        }
        .img_in img
        {
            vertical-align: middle;
            display: none;
        }
        #pv_body
        {
            width: 220px;
            height: 170px;
            overflow: auto;
            margin-left: 5px;
            text-align: center;
        }
        legend
        {
            margin-left: 10px;
        }
        #right_menu label
        {
            width: 40px;
            text-align: right;
            display: inline-block;
        }
    </style>
    <%if (false)
      { %>
    <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <% } %>
    <script src='<%=ResolveUrl("~/Scripts/jquery-1.4.1.min.js")%>' type="text/javascript"></script>
    <script type="text/javascript">
        var Folder = '<%=this.Folder %>';
        var FTB_API = new Object();
        jQuery(document).ready(
           function () {
               var bdheight = document.documentElement.clientHeight; //获取浏览器窗体高度
               jQuery('#main_table').css('height', bdheight + "px");

               //设置图片大小
               jQuery(".img_in img").each(
                    function () {
                        jQuery(this).load(function () {
                            if (acc($(this).height(), $(this).width()) > acc(85, 105)) {
                                $(this).css("height", "85px");

                            }
                            else {
                                $(this).css("width", "105px");
                            }
                            $(this).css("display", "inline-block");
                        });

                    }
               );

               //设置图片点击事件
               jQuery(".img_in").click(
                    function () {
                        jQuery(".img_in").css("border", "1px #dddfd4 solid");
                        jQuery(this).css("border", "1px #316AC5 solid");
                        jQuery(".img_in").css("background-color", "transparent");
                        jQuery(this).css("background-color", "#dae9fc");
                        var img_name = jQuery(this).find("img").attr("title");
                        jQuery("#img_feedback_message").val(img_name);
                        jQuery("#img_alt").val(img_name);
                        jQuery("#DelBtn").removeAttr("disabled");
                        jQuery("#insert").removeAttr("disabled");
                        jQuery("#pv_img").attr("src", '<%=ResolveUrl("~/"+this.Folder+"/")%>' + img_name);
                    });
               jQuery("#DelBtn").click(
                    function () {
                        jQuery("#DelBtn").attr("disabled", "disabled");
                        jQuery("#DelBtn").val("正在删除");
                        jQuery.get('<%=ResolveUrl("~/Manage/Ajax/DelImage.ashx")%>', { "Folder": Folder, "Name": jQuery("#img_feedback_message").val() }, function (data, textStatus) {
                            if (data == "ok") {
                                history.go(0);
                            }
                        });
                    });
               jQuery("#insert").click(
                    function () {
                        var src = '/' + Folder + '/' + jQuery("#img_feedback_message").val();
                        var align = document.getElementById('img_align').options[document.getElementById('img_align').selectedIndex].value;
                        var alt = jQuery("#img_alt").val();
                        var width = jQuery("#img_width").val();
                        var title = jQuery("#img_title").val();
                        var img = '<img src="' + src + '"' + ' temp_src="' + src + '"' +
                        	    ((alt != '') ? ' alt="' + alt + '"' : '') +
                                ((width != '') ? ' width="' + width + '"' : '') +
                        	    ((title != '') ? ' title="' + title + '"' : '') +
                        	    ((align != '') ? ' align="' + align + '"' : '') +
		                    ' />';
                        window.opener.insertImg(img);
                        //                        window.opener.document.getElementById('<%=this.FTB %>').value += img;
                        //                        window.opener.frames['<%=this.FTB+"_designEditor" %>'].document.body.innerHTML += img;
                        window.close();
                    });
           }
        );
        function acc(arg1, arg2) {
            var t1 = 0, t2 = 0, r1, r2;
            try { t1 = arg1.toString().split(".")[1].length } catch (e) { }
            try { t2 = arg2.toString().split(".")[1].length } catch (e) { }
            with (Math) {
                r1 = Number(arg1.toString().replace(".", ""))
                r2 = Number(arg2.toString().replace(".", ""))
                return (r1 / r2) * pow(10, t2 - t1);
            }
        } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="main_table">
            <tr>
                <td>
                    <div id="img_body">
                        <asp:Repeater ID="Image_list_rp" runat="server">
                            <ItemTemplate>
                                <div class="img_out">
                                    <div class="img_in">
                                        <img title='<%#Eval("Name") %>' alt='<%#Eval("Name") %>' class="img_my" src='<%#ResolveUrl("~/"+this.Folder+"/"+Eval("Name"))%>' />
                                    </div>
                                    <%#StrLength.trueLength(Eval("Name").ToString()) > 15 ? StrLength.cutTrueLength(Eval("Name").ToString(), 15, "...", true) : Eval("Name")%>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </td>
                <td id="right_menu" style="width: 240px; padding: 5px; vertical-align: top;">
                    <fieldset style="width: 230px; margin-left: 5px;">
                        <legend>图片预览</legend>
                        <div id="pv_body">
                            <img id="pv_img" alt="" />
                        </div>
                    </fieldset>
                    <fieldset style="width: 220px; padding: 5px; margin-left: 5px; margin-top: 10px;
                        line-height: 250%;">
                        <legend>图片属性</legend>
                        <label for="img_dim_custom">
                            Align</label>
                        <select id="img_align">
                            <option value=''>NotSet</option>
                            <option value='top'>Top</option>
                            <option value='bottom'>Bottom</option>
                            <option value='left'>Left</option>
                            <option value='right'>Right</option>
                            <option value='center'>Center</option>
                            <option value='absmiddle'>AbsMiddle</option>
                        </select>
                        <br />
                        <label for="img_dim_custom">
                            Alt</label>
                        <input type="text" id="img_alt" style="width: 150px;" />
                        <br />
                        <label for="img_dim_custom">
                            Title</label>
                        <input type="text" id="img_title" style="width: 150px;" /><br />
                        <label for="img_dim_custom">
                            Width</label>
                        <input type="text" id="img_width" style="width: 50px;"/>px<br />
                    </fieldset>
                    <input type="button" value="插入图片" id="insert" disabled="disabled" style="width: 99%;
                        height: 30px; margin-left: 2px; margin-top: 20px;" />
                </td>
            </tr>
            <tr style="height: 100px;">
                <td id="bottom_td" colspan="2" style="padding-left: 20px; position: relative;">
                    <div>
                        <label>
                            已选图片：</label>
                        <input type="text" id="img_feedback_message" disabled="disabled" style="width: 300px;" />
                        <input type="button" name="DelBtn" value="删除图片" id="DelBtn" disabled="disabled" />
                    </div>
                    <div>
                        <label>
                            上传图片：</label>
                        <asp:FileUpload ID="PicFileUpload" runat="server" Width="304px" />
                        <asp:Button ID="UpLoadPic" runat="server" Text="上传图片" OnClick="UpLoadPic_Click" />
                    </div>
                    <div>
                        <label>
                            选择文件夹：</label>
                    </div>
                    <div style="position: absolute; left: 600px; top: 10px;">
                        <asp:LinkButton ID="toone" runat="server" OnClick="toone_Click">[首页]</asp:LinkButton>
                        <asp:LinkButton ID="toup" runat="server" OnClick="toup_Click">[上一页]</asp:LinkButton>&nbsp;
                        <asp:LinkButton ID="tonext" runat="server" OnClick="tonext_Click">[下一页]</asp:LinkButton>
                        <asp:LinkButton ID="tolast" runat="server" OnClick="tolast_Click">[尾页]</asp:LinkButton>&nbsp;
                        [跳转到第
                        <asp:DropDownList ID="jumppage" runat="server" OnSelectedIndexChanged="jumppage_SelectedIndexChanged"
                            AutoPostBack="true" Style="height: 20px; margin-left: 3px; margin-bottom: -3px;">
                        </asp:DropDownList>
                        页]&nbsp;&nbsp; [页次:<asp:Label ID="nowpages_lb" runat="server" ForeColor="red"></asp:Label>
                        /
                        <asp:Label ID="pagecount_lb" runat="server" Text="Label"></asp:Label>页] [共<asp:Label
                            ID="pagesum" runat="server" Text="Label" ForeColor="red"></asp:Label>项
                        <asp:Label ID="tpagesizes" runat="server" Text="Label" ForeColor="red"></asp:Label>项/页]
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
